<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>发布寻找</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/user/css/common.css">

</head>
<body>
  <div class="container">
    <header class="bar bar-nav header sticky-top">
      <c:if test="${not empty user }">
	      <a class="button button-round pull-right issueBtn">发布</a>
      </c:if>
      <c:if test="${empty user }">
	      <a class="button button-round pull-right" href="../login.jsp">发布</a>      
      </c:if>
      <h1 class='title'>发布寻找</h1>
    </header>
    <!-- 中间，记录显示 -->
    <div class="mainContent" id="scrollDiv">
      <form class="list-block">
        <input type="text" class="uid" value="${user.uid }" style="display:none;">
        <ul>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">标题</div>
                <div class="item-input">
                  <!--  maxLength="18" -->
                  <input type="text" class="addTitle" value="">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">联系方式</div>
                <div class="item-input">
                  <input type="text" class="cellphone" value="">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">失物类别</div>
                <div class="item-input">
                  <select class="categoryList">
                  </select>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">发布类型</div>
                <div class="item-input">
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="searchLoser" name="searchForWhat" class="custom-control-input" value="0" checked>
                    <label class="custom-control-label" for="searchLoser" style="padding-top:4px;">寻找失主</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="searchLose" name="searchForWhat" class="custom-control-input" value="1">
                    <label class="custom-control-label" for="searchLose" style="padding-top:4px;">寻找失物</label>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">物品照片</div>
                <div class="item-input">
                  <input type="file" accept="image/*" class="addImageName">
                </div>
              </div>
            </div>
          </li>
          <li class="align-top">
            <div class="item-content">
              <div class="item-inner" style="border-bottom: 0.5px solid #E7E7E7;margin-bottom: 5px;">
                <div class="label">寻找细节</div>
                <div class="item-input">
                  <textarea class="detailInfo" placeholder=""></textarea>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- add .issueWarnInfo, at 2019/03/05 -->
	      <div class="issueWarnInfo" style="padding-left:40px;font-size:18px;margin-top:20px;">
	       <i><strong>提示：</strong><span style="font-size:16.5px;">一经发布，不允许修改。请认真填写！</span></i>
	      </div>
      </form>
      <div class="modal toast modal-out" style="display:block;margin-top:-24px;margin-left:-48px;"></div>
    </div><!-- end of .mainContent -->
    <!-- 底部，导航栏 -->
    <footer class="footer">
      <nav class="bar bar-tab">
        <a class="tab-item" href="../01/home.jsp">
          <span class="icon icon-home"></span>
          <span class="tab-label">首页</span>
        </a>
        <a class="tab-item active" href="../02/issue.jsp">
          <span class="icon icon-edit"></span>
          <span class="tab-label">发贴</span>
        </a>
        <c:if test="${not empty user }">
          <a class="tab-item" href="${pageContext.request.contextPath }/myIssue?method=getMyIssueArticleList&uid=${user.uid}">
            <span class="icon icon-message"></span>
            <span class="tab-label">贴子</span>
          </a>
        </c:if>
        <c:if test="${empty user }">
          <a class="tab-item" href="../03/myIssue.jsp">
            <span class="icon icon-message"></span>
            <span class="tab-label">贴子</span>
          </a>
        </c:if>
        <a class="tab-item" href="../04/me.jsp">
          <span class="icon icon-me"></span>
          <span class="tab-label">我</span>
        </a>
      </nav>
    </footer>
  </div> <!-- end of .container -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.js' charset='utf-8'></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js" charset="utf-8"></script>
  <script>
    $(function () {
    	// 判断用户是否登陆
      $('.issueBtn').on('click',function () {
    		  if($('.addTitle').val()==null||$('.addTitle').val()==""){
    			  $('.addTitle').focus()
    		  }else if($('.cellphone').val()==null||$('.cellphone').val()==""){
    			  $('.cellphone').focus()
    		  }else if($('.detailInfo').val()==null||$('.detailInfo').val()==""){
    			  $('.detailInfo').focus()
    		  }else if($(".categoryList option:selected").val() == "-1"){
    			  showToastByClickConfirm()
    		  }else{
			    	addNewIssue()
    		  }
      })
      // 运行此函数，自动加载category列表
      getCategoryList()
    })
    // select没有选中，提示选中
    function showToastByClickConfirm () {
      var info = "请选择失物类别";
      clearTimeout(timerByClick)
      $('.toast').text(info)    
      $('.toast').addClass('modal-in')
      $('.toast').removeClass('modal-out')
      var timerByClick = window.setTimeout(function () {
        $('.toast').addClass('modal-out')
        $('.toast').removeClass('modal-int')
      }, 1000)
    }
    // 发布成功或者发布失败，都显示提示，然后刷新本页面
    function showToastByTime ( successFlag ) {
      var info = null;
      if( successFlag ){
        info = '发布成功'
      }else {
        info = '发布失败'
      }
      clearTimeout(timer)
      $('.toast').text(info)    
      $('.toast').addClass('modal-in')
      $('.toast').removeClass('modal-out')
      var timer = window.setTimeout(function () {
        $('.toast').addClass('modal-out')
        $('.toast').removeClass('modal-int')
        location.reload(); // 刷新当前页面
      }, 1000)
    }
    // categoryList
    function getCategoryList () {
    	$.post(
    	  "/LostAndFound/category?method=findAllCategoryToAjax",
    	  function(data){
    	      var content = "<option value='-1' selected>请选择类别...</option>";
    	      for(var i=0;i<data.length;i++){
    	        content += "<option value='"+(data[i].cid)+"'>"+data[i].cname+"</option>"
    	      }
    	      $(".categoryList").html(content);
    	  },
    	  "json"
    	);
    }
    // 发布新的寻找记录
    function addNewIssue () {
    	var formData = new FormData();
    	formData.append('uid',$('.uid').val())
    	formData.append('addTitle',$('.addTitle').val())
    	formData.append('cellphone',$('.cellphone').val())
    	formData.append('cid',$(".categoryList option:selected").val())
    	formData.append('whatFlag',$('input:radio[name="searchForWhat"]:checked').val())
      // 有图片上传时，才进行
      if($(".addImageName")[0].files[0]!=null){
        formData.append("imageName",$(".addImageName")[0].files[0]);
      }
    	formData.append('detailInfo',$('.detailInfo').val())
    	$.ajax({
    		url:"/LostAndFound/issue?method=addNewIssue",
    		type:"post",
    		data:formData,
    		processData:false,
    		contentType:false,
    		dataType:"json",
    		success:function(result){
    			showToastByTime( result.success ) 
    		}
    	});
    }
  </script>
</body>
</html>